<template>
  <div id="di-kuang">
    <div id="tittle" @click="back">返回</div>
    <div id="allmap" :style="mapStyle"></div>
  </div>
</template>
<script type="text/javascript">
import BMap from "BMap";
export default {
  data() {
    return {
      mapStyle: {
        width: "100%",
        height: "100%",
      },
      latitude: "",
      longitude: "",
      arr: [],
    };
  },
  mounted() {
    this.ready();
  },
  methods: {
    ready() {
      var map = new BMap.Map("allmap");
      var point = new BMap.Point(this.longitude, this.latitude);
      var marker = new BMap.Marker(point);
      map.addOverlay(marker);
      map.centerAndZoom(point, 15);
      map.enableScrollWheelZoom(true);
    },
    jieshou() {
      var latitude = this.$route.params.latitude;
      this.$set(this, "latitude", latitude);
      var longitude = this.$route.params.longitude;
      this.$set(this, "longitude", longitude);
      this.arr = this.$route.params.arr;
    },
    back() {
      this.$router.push({ name: "jiaxiang", params: { jiaxiaoarr: this.arr } });
    },
  },
  created() {
    this.jieshou();
  },
  watch: {
    $route(to, from) {
      if (to.path == "/baidu") {
        console.log('a');
        this.jieshou();
        this.ready()
      }
    },
  },
};
</script>
<style>
#allmap {
  width: 100%;
  height: 100%;
}
#di-kuang {
  width: 100%;
  height: 100vh;
  position:relative;
  overflow: hidden;
}
#tittle {
  width: 100vw;
  height: 5vh;
  background: rgb(29, 172, 249);
  font-size: 4vw;
  color: white;
  line-height: 5vh;
  position: absolute;
  z-index: 9999;
}
</style>